<template>
  <div>
    <div class="fix">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
        right-icon="cross"
        @click-right-icon ="goback"
        @focus="goback"
      />
      <div class="nav">
        <div>综合</div>
        <div>价格</div>
        <div>分类</div>
      </div>
    </div>
    <div class="banner">
      <van-grid padding="0" column-num="2" icon-size="168px" :gutter="2">
        <van-grid-item v-for="value in keyWordsList" :key="value">
          <img class="img" :src="value.listPicUrl" alt="" />
          <span class="text"
            >
            <span class="db11">11.11</span>{{ value.name }}</span
          >
          <span class="price">
            <i>￥</i>{{value.sortOriginPrice}}
          </span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script lang="ts">
import { ref } from "@vue/reactivity";
import { useSearchStore } from "../../../store/search";
import { computed } from "@vue/runtime-core";
import emitter from '../../../../mitt/event'
export default {
  name: "SearchDetail",
};
</script>

<script setup lang="ts">
const value2 = ref("a");
const searchStore = useSearchStore();
// 计算获取用关键字获取的内容
const keyWordsList = computed(() => searchStore.realKeyWordsList.directlyList);
// 全局事件总线渲染要的页面
const goback=()=>{
  emitter.emit('changeshow','false')
}
</script>

<style lang="less" scoped>
.fix {
  width: 100%;
  position: fixed;
  z-index: 99;
  // top: ;
  .nav {
    display: flex;
    height: 40px;
    justify-content: space-around;
    background-color: #eee;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 1px solid #444;
  }
}

.banner {
  position: absolute;
  top: 94px;
  background-color: #fff;
  .img {
    height: 168px;
    width: 168px;
    margin-bottom: 5px;
    border-radius: 8px;
  }
  .text {
    font-size: 16px;
    display: -webkit-box !important;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    .db11 {
      background-color: red;
      display: inline-block;
      padding: 2px 3px;
      border-radius: 4px;
    }
  }
  .price{
    width: 97%;
    text-align: left;
    color: red;
    font-size: 18px;
    font-weight: 900;
    i{
      font-size: 14px;
    }
  }
}
</style>
